<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./browser.min.js"></script>
</head>
<body>
    <div id="example"></div>


    <script type="text/babel">

        var Hello = React.createClass({
            getInitialState : function () {
                return {opacity : 1.0}
            },
            componentDidMount: function () {
                setInterval(function () {
                    var opacity = this.state.opacity;
                    opacity -= .05;
                    if(opacity < 0.1) opacity = 0.1;
                    this.setState({opacity:opacity})

                }.bind(this), 100);


            },
            render : function () {
                return (
                    <div style={{opacity : this.state.opacity}}>
                        Hello! {this.props.name}
                    </div>
                );
            }


        });






        ReactDOM.render(<Hello name="zhuqianli"/>,document.getElementById("example"));

    </script>



</body>
</html>